<template>
  <div class="login">
    <div class="logoBox">
      <div class="logo">
        <img src="@/assets/images/logo.png" alt="">
      </div>
      <div class="title">
        <div class="title1">行业考核评价</div>
        <div class="title2">（局重点工作跟踪）</div>
      </div>
    </div>
    <div class="login-body">
      <van-form @submit="onSubmit" class="formBox">
        <!-- 用户名 -->
        <van-field :error="isUError" class="field1" v-model="state.userName" name="username" placeholder="请填写用户名"
          :center="true" :placeholder="isUError ? '请填写用户名' : '用户名'" autocomplete="off">
          <template #left-icon>
            <img class="input-icon" src="@/assets/images/userIcon.png" alt="">
          </template>
        </van-field>

        <!-- 密码 -->
        <van-field class="field1" v-model="state.passWord" :error="isPError" :type="showPassword ? 'text' : 'password'"
          name="password" placeholder="请填写密码" :placeholder="isPError ? '请填写密码' : '密码'" autocomplete="off">
          <template #left-icon>
            <img class="input-icon" src="@/assets/images/passwordIcon.png" alt="">
          </template>
          <template #right-icon>
            <span class="solts" @click="switchPasswordType">
              <van-icon name="eye" v-if="showPassword" />
              <van-icon name="closed-eye" v-else />
            </span>
          </template>
        </van-field>

        <!-- 验证码输入框和获取验证码 -->
        <!-- <div class="verify-box">
          <van-field class="field2" v-model="state.veriCode" :error="isVError" type="text" name="vericode"
            placeholder="请填写验证码" :placeholder="isVError ? '请填写验证码' : '验证码'" autocomplete="off">
            <template #left-icon>
              <img class="input-icon" src="@/assets/images/veriIcon.png" alt="">
            </template>
          </van-field>
          <van-button class="verify-btn">
            获取验证码
          </van-button>
        </div> -->
        <div>
          <van-button class="subBtn" round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { loginReq } from "@/service/user";
import { useUser } from "@/stores/user"

const userStore = useUser()
const state = reactive({
  userName: "",
  passWord: "",
  // veriCode: ""
})
// 账号的校验
const isUError = ref(false)
// 密码的校验
const isPError = ref(false)
// 验证码
const isVError = ref(false)
// 是否第一次点击了登录
const isFisrtPress = ref(false)
watch(() => state, (newV, oldV) => {
  if (isFisrtPress.value) {
    const { userName, passWord, veriCode } = newV
    isUError.value = userName ? false : true
    isPError.value = passWord ? false : true
    // isVError.value = veriCode ? false : true
  }
}, {
  deep: true
})
const showPassword = ref(false)

function switchPasswordType() {
  showPassword.value = !showPassword.value
}
const router = useRouter()
function onSubmit() {
  if (!state.userName || !state.passWord) {
    if (!state.userName) {
      isUError.value = true
    }
    if (!state.passWord) {
      isPError.value = true
    }
    // if (!state.veriCode) {
    //   isVError.value = true
    // }
    isFisrtPress.value = true
    return
  }
  userStore.login(state).then(res => {
    console.log("🚀 ~ userStore.login ~ res:", res)
    if (res == 'success') {
      router.push('/home')
    }
  })

}

</script>

<style lang="scss" scoped>
@font-face {
  font-family: DFPZongYiW7;
  src: url("@/assets/font/DFPZongYiW7.TTF");
}

::v-deep(.van-field__left-icon) {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.login {

  .logoBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 450px;
    background: linear-gradient(180deg, rgba(224, 248, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

    .logo {
      img {
        height: 160px;
        width: 160px;
      }
    }

    .title {
      color: rgba(20, 71, 97, 1);
      // font-family: DFPZongYiW7;
      font-weight: bold;
      text-align: center;

      .title1 {
        font-size: 44px;
      }

      .title2 {
        font-size: 32px;
      }
    }
  }

}

.formBox {
  .van-field {

    height: 90px;
    border-radius: 30px;
    border: 2px solid rgba(208, 208, 208, 1);
    font-size: 28px;
    color: rgba(193, 193, 193, 1);
    margin: auto;
    margin-bottom: 40px;
  }

  .field1 {
    width: 590px !important;
  }

  .field2 {
    width: 386px !important;
    margin: 0;
  }

}

.verify-box {
  width: 590px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;

  .verify-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    width: 180px;
    height: 70px;
    border: none;
    font-size: 28px;
    color: rgba(255, 255, 255, 1);
    background: rgba(8, 173, 255, 1);

  }

}

.subBtn {
  width: 590px;
  height: 90px;
  border-radius: 30px;
  background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%);
  margin: auto;
  margin-top: 55px;
  border: none;
  font-size: 32px;
  color: rgba(255, 255, 255, 1);

}

.input-icon {
  width: 31.09px;
  height: 38px;
}
</style>
